import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TypeUtils } from '../core/api';
import { LinkModule } from './link.module';

@Component({
  template: `
    <a lv-link [lvType]="lvType" [lvIcon]="lvIcon" [lvDisabled]="lvDisabled" href="#">link</a>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestLinkBasicComponent {
  @Input() lvType: 'normal' | 'primary';
  @Input() lvIcon: boolean | string = false;
  @Input() lvDisabled: boolean;

  public typeUtils = TypeUtils;
}

describe('LinkComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [TestLinkBasicComponent],
      imports: [LinkModule],
    }).compileComponents;
  }));

  describe('render', () => {
    let component: TestLinkBasicComponent;
    let fixture: ComponentFixture<TestLinkBasicComponent>;
    let cdr: ChangeDetectorRef;

    const renderComponent = param => {
      for (const [key, value] of Object.entries(param)) {
        component[key] = value;
      }
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    };

    const rerenderComponent = param => {
      for (const [key, value] of Object.entries(param)) {
        component[key] = value;
      }
      cdr.detectChanges();
      expect(fixture).toMatchSnapshot();
    };

    beforeEach(() => {
      fixture = TestBed.createComponent(TestLinkBasicComponent);
      component = fixture.componentInstance;
      cdr = fixture.debugElement.injector.get(ChangeDetectorRef);
      component.lvType = 'normal';
      component.lvIcon = 'false';
    });

    it('without icon', () => {
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
      rerenderComponent({ lvType: 'primary' });
    });

    it('with default icon', () => {
      renderComponent({ lvIcon: true });
      rerenderComponent({ lvType: 'primary' });
    });

    it('with custom icon', () => {
      renderComponent({ lvIcon: 'lv-icon-checked' });
      rerenderComponent({ lvType: 'primary' });
    });

    it('with disabled', () => {
      renderComponent({ lvDisabled: true });
      rerenderComponent({ lvIcon: true });
      rerenderComponent({ lvType: 'normal' });
      rerenderComponent({ lvIcon: false });
    });
  });
});
